<template>
  <mt-navbar title="拒绝接单"> </mt-navbar>
  <view class="safety-150">
    <view class="forms">
      <uv-form ref="formRef" label-position="left" label-width="auto" :border-bottom="false" :model="modelForm" :rules="rules">
        <view class="h-16rpx"></view>
        <uv-form-item label="拒绝原因：" prop="rejectReasonType" required>
          <view class="flex-1 min-w-0 mr-24rpx px-20rpx" @click="openPopup">
            <text v-if="modelForm.rejectReasonType" class="text-28rpx text-#1A1A1A">{{ modelForm.rejectReason }}</text>
            <text v-else class="text-28rpx text-#c0c4cc">请选择拒绝原因</text>
          </view>
          <uv-icon name="arrow-right" color="#1C213E" size="28rpx" @click="openPopup"></uv-icon>
        </uv-form-item>
        <view class="h-16rpx"></view>
        <uv-form-item label="补充说明：" label-position="top" prop="rejectRemark" required>
          <view class="w-full pt-20rpx">
            <uv-textarea v-model="modelForm.rejectRemark" maxlength="500" auto-height placeholder="请输入补充说明" border="none"></uv-textarea>
          </view>
        </uv-form-item>
      </uv-form>
    </view>

    <view class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2">
      <mt-button type="info" class="w-210rpx" :shake="false" @click="back">取消</mt-button>
      <mt-button class="w-450rpx" @click="handleSubmit">确定</mt-button>
    </view>

    <uv-popup ref="popupRef" round="16rpx" mode="bottom" z-index="900">
      <view class="px-146rpx">
        <view
          v-for="(item, index) in reasonArr"
          :key="index"
          class="py-40rpx text-32rpx text-#1C213E text-center"
          style="border-bottom: 2rpx solid #e6e6e6"
          @click="handleChangeReason(item)"
          >{{ item.value }}</view
        >
        <view class="py-40rpx text-32rpx text-#F94B4A text-center" @click="closePopup">取消</view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup>
import { cluerejectReceive } from '@/subClue/api/index';
import { clientdictgetDictList } from '@/api/common';

const formRef = ref();
const modelForm = ref({
  clueId: '',
  rejectReasonType: '',
  rejectReason: '',
  rejectRemark: ''
});
const rules = {
  rejectReasonType: {
    type: 'string',
    required: true,
    message: '请选择拒绝原因',
    trigger: ['change']
  },
  rejectRemark: {
    type: 'string',
    required: true,
    message: '请输入补充说明',
    trigger: ['blur']
  }
};

const reasonArr = ref([]);
function getSelect() {
  clientdictgetDictList({
    key: 'service_provider_reject_receive_reason'
  }).then((res) => {
    reasonArr.value = res.data.map((item) => {
      return { label: item.dictLabel, value: item.dictValue };
    });
  });
}

const popupRef = ref();

function openPopup() {
  popupRef.value.open();
}

function closePopup() {
  popupRef.value.close();
}

function handleChangeReason(item) {
  modelForm.value.rejectReasonType = item.label;
  modelForm.value.rejectReason = item.value;
  closePopup();
}

function handleSubmit() {
  formRef.value
    .validate()
    .then(() => {
      cluerejectReceive(modelForm.value).then(() => {
        uni.showToast({
          icon: 'none',
          title: '操作成功',
          duration: 1000
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: Number(backNum.value)
          });
        }, 1000);
      });
    })
    .catch((err) => {});
}

function back() {
  uni.navigateBack();
}

const backNum = ref('1');
onLoad((options) => {
  modelForm.value.clueId = options.id;
  backNum.value = options?.back || '1';
  getSelect();
});
</script>

<style lang="scss" scoped>
.forms {
  :deep(.uv-textarea) {
    background: #f7f7f7 !important;
    .uni-textarea-wrapper {
      min-height: 100rpx;
    }
  }
  :deep(.uv-form) {
    .uv-form-item {
      font-size: 28rpx;
      background-color: #ffffff;
      .uv-form-item__body {
        padding: 30rpx 32rpx;
      }
      .uv-form-item__body__left__content__label {
        font-size: 28rpx;
        color: #727687;
        padding-left: 8rpx;
      }
    }
  }
}
</style>
